<template>
  <span class="drop-hover btn-group-drop" :class="type === 'up' ? 'dropup' : 'dropdown'">
    <button class="btn btn-default" type="button">
      <span class="drop-select">管道</span>
      <span class="caret"></span>
    </button>
    <ul class="dropmenu dropmenu-right">
      <li class="menu-item" v-for="item in list" :key="item.text">
        <a class="item-link" href="javascript:void(0)" @click="handlePipe(item.href)">
          <i :class="'link-icon iconfont ' + item.icon"></i> {{item.text}}
        </a>
      </li>
    </ul>
  </span>
</template>

<script>
import listTools from './list-tools.js'

/* JSON转换 */
export default {
  props: {
    operation: {
      default: null
    },
    name: {
      default: ''
    },
    type: {
      default: 'up'
    }
  },

  data () {
    return {
      list: []
    }
  },

  methods: {
    /**
     * @function 管道操作处理
    */
    handlePipe (path) {
      // 取出当前操作的输入
      if (this.operation) {
        this.$store.state.inputData = this.operation.inputData
      }
      // 跳转
      this.$router.push(this.getMicroRoute('/tools/item/' + path))
    }
  },

  mounted () {
    this.list = []
    // 遍历取出可输入的工具
    listTools.forEach(item => {
      // 过滤无效数据
      if (!Array.isArray(item.children)) {
        return true
      }
      item.children.forEach(node => {
        // 过滤无输入
        if (!node.input || node.href === this.name) {
          return true
        }
        this.list.push(node)
      })
    })
  }
}
</script>

<style lang="less">

</style>
